@import '../../../../../style/theme/color';

.sort-clickable {
  cursor: pointer;
  vertical-align: -0.55em;
}

:host {
  height: 20px;
  line-height: 20px;
  margin-right: 4px;
  margin-left: 8px;
  flex: 1;
  display: none;

  &.devui-icon-show {
    display: block;
  }
}

.sort-icon-default {
  visibility: hidden;

  > svg g use {
    fill: $devui-shape-icon-fill;
  }

  > svg g polygon {
    fill: $devui-icon-bg;
  }

  &:hover {
    > svg g use {
      fill: $devui-shape-icon-fill-active;
    }
  }

  &-visible {
    visibility: visible;
  }
}

.sort-icon-asc,
.sort-icon-desc {
  > svg g use {
    fill: $devui-brand;
  }

  > svg g polygon {
    fill: $devui-icon-bg;
  }

  &:hover {
    > svg g use {
      fill: $devui-brand;
    }
  }
}

.sort-icon-asc {
  > svg g polygon:last-of-type {
    opacity: 0.3;
  }
}

.sort-icon-desc {
  > svg g polygon:first-of-type {
    opacity: 0.5;
  }
}
